<template>
  <div>
    <a-layout id="components-layout-demo-responsive">
      <a-layout-sider v-model="collapsedLeft" :trigger="null" collapsible collapsedWidth="0" class="sider sider-left" width="330" :style="{ left: positionLeft }">
        <div class="goods" id="goods">
          <a-descriptions :column="1" id="components">
            <div>
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>{{ customerInfo.details.nickName }}</span>
                </template>
                <router-link class="nickname" :to="`/box/customer/info/personal/${customerInfo.details.unionid}?blank=blank`" target="_blank">{{ customerInfo.details.nickName }}</router-link>
              </a-tooltip>
              <router-link :to="`/box/customer/info/personal/${customerInfo.details.unionid}?blank=blank`" target="_blank">（{{ customerInfo.details.phone }}）</router-link>
              <a-tag color="orange"> {{ customerInfo.details.viptypeName }} </a-tag>
            </div>
            <div>
              <span class="edit-size">{{ genderType[customerInfo.details.gender] }}</span>
              <span class="edit-size">{{ customerInfo.age }} 岁（{{ customerInfo.details.birthday ? customerInfo.details.birthday : '-' }})</span>
              <div v-if="couponList.isShow">
                <a-tooltip placement="top">
                  <template slot="title">
                    <div v-for="(item, index) in couponList.list" :key="index">{{ item }}</div>
                  </template>
                  <img src="https://img.bzhz.jnbygroup.com/1647919846648-discount.png" class="discount" />
                </a-tooltip>
              </div>
            </div>
            <a-descriptions-item label="身高/体重">
              <span style="margin-right: 8px">{{ customerInfo.customerInfoForAnswer.height }}cm/ {{ customerInfo.customerInfoForAnswer.weight }}kg</span>
              <a class="edit" @click="showModal('shape')">编辑</a>
            </a-descriptions-item>
            <a-descriptions-item label="累计BOX消费"> ¥ {{ customerInfo.boxTotConsume }}</a-descriptions-item>
            <a-descriptions-item label="累计集团消费"> ¥ {{ customerInfo.groupBuyAmount }} </a-descriptions-item>
            <a-descriptions-item label="集团积分">
              {{ customerInfo.integer }}
            </a-descriptions-item>
            <a-descriptions-item label="BOX金币">
              {{ customerInfo.details.coin }}
            </a-descriptions-item>
            <a-descriptions-item label="会员备注">
              <span style="margin-right: 8px" v-show="customerInfo.details.bgRemark">{{ customerInfo.details.bgRemark }}</span>
              <a class="edit" @click="showModal('memberRemark')">编辑</a>
            </a-descriptions-item>
            <a-descriptions-item label="收货地址">
              <template v-if="defLogistic.id">
                <div>
                  <span>{{ defLogistic.contactName }}</span>
                  <a-divider type="vertical" />
                  <span> {{ defLogistic.contactPhone }}</span>
                </div>
                <div>
                  <span style="margin-right: 8px">{{ defLogistic.province }} {{ defLogistic.city }} {{ defLogistic.district }} {{ defLogistic.address }}</span>
                  <a class="edit" @click="regionClick">编辑</a>
                </div>
              </template>
              <span v-else> 暂无收货地址 </span>
            </a-descriptions-item>
            <a-descriptions-item label="经销品牌">
              <!-- 20220708 原 不可发货品牌 => 变更为 经销品牌 -->
              <template v-if="customerInfo.dealerBrand && customerInfo.dealerBrand.length > 0">
                <a-tag color="red" v-for="(item, index) in customerInfo.dealerBrand" :key="index">
                  {{ item }}
                </a-tag>
              </template>
              <span v-else>-</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-divider />
          <a-descriptions :column="1" class="condition-container" id="components-anchor">
            <div>
              <img src="../../../../assets/box.png" class="edit-icon" />
              <span class="icon-title">要盒需求</span>
            </div>
            <template v-if="outNo != ''">
              <div>
                已发盒<span class="font-color">{{ wantBox.sendBoxNum }}</span
                >个，成交<span class="font-color">{{ wantBox.dealBoxNum }}</span
                >个
              </div>
              <a-descriptions-item label="用户留言">
                <template v-if="wantBox.leaveMsg">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span> {{ wantBox.leaveMsg }}</span>
                    </template>
                    <div class="leaveMsg" style="-webkit-box-orient: vertical">
                      {{ wantBox.leaveMsg }}
                    </div>
                  </a-tooltip>
                </template>
                <span v-else>-</span>
              </a-descriptions-item>
              <a-descriptions-item label="期望联系方式"> {{ wantBox.expectConnect }} </a-descriptions-item>
              <a-descriptions-item label="身高/体重"> {{ wantBox.height }}cm/ {{ wantBox.weight }}kg</a-descriptions-item>
            </template>
          </a-descriptions>
          <template v-if="outNo != ''">
            <a-descriptions :column="1" class="food-list">
              <a-descriptions-item label="期望风格主题">
                <div v-if="wantBox.expectTheme && wantBox.expectTheme.length <= 4">
                  <div v-for="(item, index) in wantBox.expectTheme" :key="index" class="like-theme" @click="bigImg(index, wantBox.expectTheme, 'styleList')">
                    <img :src="item.img" class="imgs" />
                    <p>{{ item.name }}</p>
                  </div>
                </div>
                <a-carousel arrows :dots="false" :slidesToShow="3" style="margin-left: 30px" v-else>
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                    <a-icon type="left" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right" />
                  </div>
                  <div class="like-theme" v-for="(item, index) in wantBox.expectTheme" :key="index">
                    <img :src="item.img" class="imgs" @click="bigImg(index, wantBox.expectTheme, 'styleList')" />
                    <p>{{ item.name }}</p>
                  </div>
                </a-carousel>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="1">
              <a-descriptions-item label="期望品类">{{ wantBox.expectProduct }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="1" class="food-list" v-if="wantBox.customerStyleImgs && wantBox.customerStyleImgs.length > 0">
              <a-descriptions-item label="搭配参考风格图">
                <div v-if="wantBox.customerStyleImgs && wantBox.customerStyleImgs.length <= 4">
                  <div v-for="(item, index) in wantBox.customerStyleImgs" :key="index" class="like-theme">
                    <img :src="item.value" class="imgs" @click="bigImg(index, wantBox.customerStyleImgs, 'styleList')" />
                  </div>
                </div>
                <a-carousel arrows :dots="false" :slidesToShow="4" style="margin-left: 27px" v-else>
                  <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                    <a-icon type="left" />
                  </div>
                  <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                    <a-icon type="right" />
                  </div>
                  <div class="like-theme" v-for="(item, index) in wantBox.customerStyleImgs" :key="index">
                    <img :src="item.value" class="imgs" @click="bigImg(index, wantBox.customerStyleImgs, 'styleList')" />
                  </div>
                </a-carousel>
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="1" v-else>
              <a-descriptions-item label="搭配参考风格图">-</a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="1">
              <a-descriptions-item label="我的备注">
                <span style="margin-right: 8px" v-show="wantBox.boxRemark">{{ wantBox.boxRemark }}</span>
                <a class="edit" @click="showModal('meRemark')">编辑</a>
              </a-descriptions-item>
            </a-descriptions>
          </template>
          <div v-else style="width: 100%">
            <a-empty :description="false" style="margin: 0 auto; display: block" />
          </div>
          <a-divider />
          <a-descriptions :column="1" id="components-anchor-demo">
            <div>
              <img src="../../../../assets/transaction.png" class="edit-icon" />
              <span class="icon-title">交易偏好</span>
            </div>
            <a-descriptions-item label="品类">
              <span class="edit-tag">{{ customerInfo.bcustomerPreferenceInfo.category }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="材质">
              <template>
                <span> {{ customerInfo.bcustomerPreferenceInfo.textureOfMaterial }}</span>
              </template>
            </a-descriptions-item>
            <a-descriptions-item label="风格">
              <span> {{ customerInfo.bcustomerPreferenceInfo.style }}</span>
            </a-descriptions-item>
            <a-descriptions-item label="颜色">
              <span> {{ customerInfo.bcustomerPreferenceInfo.color }}</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-divider />
          <div id="comp-box">
            <div class="section-title">
              <img src="../../../../assets/record.png" class="edit-icon" />
              <span class="icon-title">交易记录</span>
            </div>
            <a-list class="demo-loadmore-list order-list" :loading="loading" item-layout="horizontal" :data-source="orderList">
              <div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                <a-spin v-if="loadingMore" />
                <a v-else @click="onLoadMore"> 加载更多 </a>
              </div>
              <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                <div class="img-box">
                  <p class="tagType blue" v-if="item.type == 2">退货</p>
                  <img :src="item.imgUrl ? item.imgUrl : 'https://img.bzhz.jnbygroup.com/cloth.png'" class="order-img" @click="open(item)" />
                  <a-tag color="orange">{{ item.channel }}</a-tag>
                </div>
                <div style="overflow: hidden">
                  <a-tooltip placement="topLeft">
                    <template slot="title">
                      <span>【{{ item.brand }}】{{ item.goodsName }} </span>
                    </template>
                    <h3 class="commodity—title">【{{ item.brand }}】{{ item.goodsName }}</h3>
                  </a-tooltip>
                  <a-descriptions :column="2" class="transaction">
                    <a-descriptions-item label="款号">
                      {{ item.name }}
                    </a-descriptions-item>
                    <a-descriptions-item label="尺码">
                      {{ item.size }}
                    </a-descriptions-item>
                    <a-descriptions-item label="价格">
                      {{ item.productAmtActual }}
                    </a-descriptions-item>

                    <a-descriptions-item label="折扣"> {{ item.discount }}</a-descriptions-item>
                    <a-descriptions-item label="购买时间">
                      {{ item.time.split(' ')[0] }}
                    </a-descriptions-item>
                  </a-descriptions>
                </div>
              </a-list-item>
            </a-list>
          </div>
          <a-divider />
          <a-descriptions :column="1" class="condition-container" id="anchor-demo">
            <div>
              <img src="../../../../assets/archives.png" class="edit-icon" />
              <span class="icon-title">风格档案</span>
            </div>

            <a-descriptions-item label="肤色/身型">
              {{ customerInfo.customerInfoForAnswer.skin }}<span v-if="customerInfo.customerInfoForAnswer.skin">/</span>{{ customerInfo.customerInfoForAnswer.body }}
            </a-descriptions-item>
            <a-descriptions-item label="穿搭困扰">
              {{ customerInfo.customerInfoForAnswer.position }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1" class="food-list" v-if="customerInfo.stylesList && customerInfo.stylesList.length > 0">
            <a-descriptions-item label="风格偏好">
              <div v-if="customerInfo.stylesList && customerInfo.stylesList.length <= 4">
                <div v-for="(item, index) in customerInfo.stylesList" :key="index" class="like-theme">
                  <img :src="item.value" class="imgs" @click="bigImg(index, customerInfo.stylesList, 'styleList')" />
                  <p>{{ item.name }}</p>
                </div>
              </div>
              <a-carousel arrows :dots="false" :slidesToShow="4" style="margin-left: 30px" v-else>
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                  <a-icon type="left" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right" />
                </div>
                <div class="like-theme" v-for="(item, index) in customerInfo.stylesList" :key="index">
                  <img :src="item.value" class="imgs" @click="bigImg(index, customerInfo.stylesList, 'styleList')" />
                  <p>{{ item.name }}</p>
                </div>
              </a-carousel>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1" v-else>
            <a-descriptions-item label="风格偏好">
              <span v-if="!(customerInfo.stylesList && customerInfo.stylesList.length > 0)">-</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1">
            <a-descriptions-item label="可接受上装">
              {{ customerInfo.customerInfoForAnswer.onCloth }}
            </a-descriptions-item>
            <a-descriptions-item label="可接受下装">
              {{ customerInfo.customerInfoForAnswer.downCloth }}
            </a-descriptions-item>
            <a-descriptions-item label="不可接受色系">
              {{ customerInfo.customerInfoForAnswer.colorNew }}
            </a-descriptions-item>
            <a-descriptions-item label="不想露出部位">
              {{ customerInfo.customerInfoForAnswer.partForNo }}
            </a-descriptions-item>
            <a-descriptions-item label="不可接受面料">
              {{ customerInfo.customerInfoForAnswer.lining }}
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1" class="food-list" v-if="customerInfo.lifePhotos && customerInfo.lifePhotos.length > 0">
            <a-descriptions-item label="生活照">
              <div v-if="customerInfo.lifePhotos && customerInfo.lifePhotos.length <= 4">
                <div v-for="(item, index) in customerInfo.lifePhotos" :key="index" class="like-theme">
                  <img :src="item.value" class="imgs" @click="bigImg(index, customerInfo.lifePhotos, 'styleList')" />
                </div>
              </div>
              <a-carousel arrows :dots="false" :slidesToShow="4" style="margin-left: 30px" v-else>
                <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px">
                  <a-icon type="left" />
                </div>
                <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
                  <a-icon type="right" />
                </div>
                <div class="like-theme" v-for="(item, index) in customerInfo.lifePhotos" :key="index">
                  <img :src="item.value" class="imgs" @click="bigImg(index, customerInfo.lifePhotos, 'styleList')" />
                </div>
              </a-carousel>
            </a-descriptions-item>
          </a-descriptions>
          <a-descriptions :column="1" v-else>
            <a-descriptions-item label="生活照">
              <span v-if="!(customerInfo.stylesList && customerInfo.stylesList.length > 0)">-</span>
            </a-descriptions-item>
          </a-descriptions>
          <a-divider />
          <a-descriptions :column="1" class="condition-container" id="components-demo">
            <div>
              <img src="../../../../assets/member.png" class="edit-icon" />
              <span class="icon-title">会员权益</span>
            </div>

            <a-descriptions-item label="BOX可用券">
              <div v-if="disclength == 0">暂无可用券</div>
              <div v-if="disclength > 2">
                <a class="volume" @click="seeClick">查看更多TA的券</a>
                <a-icon type="right" style="color: #98999b" />
              </div>
            </a-descriptions-item>
          </a-descriptions>
          <DiscountModal ref="DiscountModal" :discountList="discountList" :interceptList="interceptList"></DiscountModal>
          <!-- <a-divider /> -->
        </div>
      </a-layout-sider>
      <a-layout-content class="selection" :style="{ paddingRight: paddingRightNum, paddingLeft: paddingLeftNum }">
        <div class="handle-left" @click="handleLeft" :style="{ left: handlePositionLeft }">
          <a-icon :type="collapsedLeft ? 'right' : 'left'" />
        </div>
        <div class="handle-left" :style="{ left: handlePositionLeft, top: '108px', background: 'transparent' }">
          <a-anchor :affix="false" :getContainer="gerGood" @click="anchorClick" :bounds="300">
            <a-anchor-link :href="item.herf" :title="item.title" class="handle-item" v-for="(item, index) in informationlist" :key="index" />
          </a-anchor>
        </div>
        <div class="handle-right" @click="handleRight" :style="{ right: collapsedRight ? '0' : '230px', position: collapsedRight ? 'fixed' : 'fixed' }" v-if="collapsedRight">
          <a-icon type="left" />
          <div>购物车</div>
        </div>
        <div class="content">
          <a-tabs default-active-key="1" @change="goodsTabsChange" :animated="false">
            <a-tab-pane key="1" tab="商品库" forceRender>
              <a-skeleton active :loading="gender == null" :paragraph="{ rows: 8 }">
                <Product @refreshShoppingCart="updateShoppingCart" :unionId="unionId" @openInfo="openInfo" :gender="gender" @getStoreId="getStoreId"></Product>
              </a-skeleton>
            </a-tab-pane>
            <a-tab-pane key="2" tab="look推荐">
              <!-- <Look @refreshShoppingCart="updateShoppingCart" :outNo="outNo" :unionId="unionId" @openInfo="openInfo"></Look> -->
              <a-skeleton active :loading="gender == null" :paragraph="{ rows: 8 }">
                <RecommendLook :gender="gender" :unionId="unionId" @refreshShoppingCart="updateShoppingCart"></RecommendLook>
              </a-skeleton>
            </a-tab-pane>
            <a-tab-pane key="3" tab="单品推荐">
              <Goods @refreshShoppingCart="updateShoppingCart" :unionId="unionId" @openInfo="openInfo"></Goods>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-content>
      <a-layout-sider v-model="collapsedRight" :trigger="null" collapsible collapsedWidth="0" class="sider sider-right" width="200">
        <div class="edit-title">
          <div class="shop-box">
            <div class="edit-shop">选择商品({{ cartList.length }})</div>
            <a-icon type="close" class="close" @click="handleRight" />
          </div>
          <div style="height: 22px">
            <template v-if="cartList.length > 0">
              <div class="edit-order" v-if="falg" @click="() => (falg = !falg)">编辑顺序</div>
              <div class="edit-order" v-else>
                <a @click="determine" class="determine">确定</a>
                <a @click="cancelOrder">取消</a>
              </div>
            </template>
          </div>
        </div>
        <a-card :bordered="false" class="shopping-box">
          <a-list :data-source="cartList" />
          <draggable v-model="cartList" chosenClass="chosen" animation="1000" :disabled="falg">
            <transition-group>
              <a-list item-layout="horizontal" class="shoppingcart" v-for="(item, index) in cartList" :key="item.id">
                <a-card class="cartGood" :id="index" :bordered="false">
                  <a-icon type="close-circle" theme="filled" class="close" @click="deleteCart(item.id, index, item)" v-if="falg" />
                  <img slot="cover" alt="example" :src="item.imgUrl" class="img-cover" @click="open(item)" />
                  <div class="content">
                    <h3>{{ item.productName }}</h3>
                    <div>款号：{{ item.productCode }}<span class="neitao" v-if="item.ifEb">内淘</span></div>
                    <!-- "0 无任何标签   1 搭配过  2 搭配过同款   3 购买过  4 购买过同款" -->
                    <p class="tag yellow" v-if="item.status == 1">搭配过</p>
                    <p class="tag yellow" v-else-if="item.status == 2">搭配过同款</p>
                    <p class="tag red" v-else-if="item.status == 3">购买过</p>
                    <p class="tag red" v-else-if="item.status == 4">购买过同款</p>
                    <p class="tag green" v-else-if="item.status == 5">加购过</p>
                    <div class="recommend-look" v-if="item.inLook == 1 && falg" @click="showRecommend(item)"><a-icon type="search" />推荐搭配</div>
                    <div class="price">
                      <span>￥{{ item.promotionPrice }}</span>
                      <span>￥{{ item.price }}</span>
                    </div>
                    <div style="margin-bottom: 16px">
                      <!-- <a-select
                        :disabled="!falg"
                        :value="item.colorName"
                        style="width: 92px; "
                        :getPopupContainer="triggerNode => triggerNode.parentNode"
                        @dropdownVisibleChange="querySkuAndStock(item, 'color')"
                        @select="
                          value => {
                            selectColor(value, item)
                          }
                        "
                      >
                        <a-select-option :value="colorItem.colorno" v-for="(colorItem, colorIndex) in item.colorList" :key="colorIndex">
                          {{ colorItem.color_name }}
                        </a-select-option>
                      </a-select>
                      <a-select
                        :disabled="!falg"
                        style="width: 60px;margin-left: 4px"
                        :value="item.sizeName"
                        :getPopupContainer="triggerNode => triggerNode.parentNode"
                        @dropdownVisibleChange="querySkuAndStock(item, 'size')"
                        @select="
                          value => {
                            selectSize(value, item)
                          }
                        "
                      >
                        <a-select-option :value="sizeItem.sizeno" v-for="(sizeItem, sizeIndex) in item.sizeList" :key="sizeIndex" :disabled="disabledSize(item, sizeItem.sizeno)">
                          {{ sizeItem.size_name }}
                        </a-select-option>
                      </a-select> -->
                      <a-cascader
                        :options="item.skuOptions"
                        :value="[item.currentSku.colorNo, item.currentSku.sizeNo]"
                        :allowClear="false"
                        :disabled="item.disabled || !falg"
                        @change="v => skuOnChange(v, item, index)"
                        @popupVisibleChange="v => skuPopVisible(v, item)"
                        :popupVisible="item.pop"
                      />
                    </div>
                  </div>
                </a-card>
              </a-list>
            </transition-group>
          </draggable>
        </a-card>
        <div class="footer-box">
          <div>
            共
            <span class="edit-color">{{ cartList.length }}</span>
            件，总计:
          </div>
          <div class="price-box">
            <span class="edit-color">￥{{ totPromotionPrice.toFixed(2) }} </span>
            <span>￥{{ totPrice.toFixed(2) }}</span>
          </div>
          <a-button type="primary" @click="toColl">
            选完商品，去搭配
            <a-icon type="swap-right" />
          </a-button>
        </div>
      </a-layout-sider>
      <a-back-top />
    </a-layout>
    <BigImg :visibleImgs="visibleImgs" :imgList="imgList" :goToIndex="goToIndex" @closeBig="closeBig"></BigImg>
    <GoodInfo :infoVisible="infoVisible" :proInfo="proInfo" :infoType="infoType" @closeInfo="closeInfo"></GoodInfo>
    <!-- 选择地址 -->
    <Region :userInfo="userInfo" :initData="initData" @closeAddress="closeAddress" @newAddress="newAddress" @dealerBrand="dealerBrand"></Region>
    <!-- 商品详情 -->
    <goodInfoModal ref="goodInfoModal"></goodInfoModal>
    <a-modal v-model="visible" centered :title="modalText" @ok="handleOk" :destroyOnClose="true">
      <div v-if="modalType === 'memberRemark'">
        <div>会员备注</div>
        <a-textarea v-model="memberRemark" placeholder="请输入会员备注" :auto-size="{ minRows: 3, maxRows: 5 }" :maxLength="50" class="remark" />
      </div>
      <div v-if="modalType === 'meRemark'">
        <div>我的备注</div>
        <a-textarea placeholder="请输入我的备注" v-model="meRemark" :auto-size="{ minRows: 3, maxRows: 5 }" :maxLength="50" class="remark" />
      </div>
      <div v-if="modalType === 'shape'">
        <a-row type="flex" class="edit-row">
          <a-col :span="12">
            <div>身高</div>
            <a-input-number :min="0" placeholder="请输入身高" class="shape" v-model="height" />cm
          </a-col>
          <a-col :span="12">
            <div>体重</div>
            <a-input-number :min="0" placeholder="请输入体重" class="shape" v-model="weight" />kg
          </a-col>
        </a-row>
      </div>
    </a-modal>
    <!-- 推荐LOOK弹窗 -->
    <recommend-look-draw ref="recommendLookDraw" :storeId="storeId" :unionId="unionId" @refreshShoppingCart="updateShoppingCart" />
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import Look from './module/look'
import Goods from './module/goods'
import Product from './module/product'
import BigImg from '@/views/box/components/UserMsg/bigImg'
import DiscountModal from '@/views/box/components/discount/DiscountModal'
import Region from './module/region'
import GoodInfo from './module/goodInfo.vue'
import RecommendLookDraw from './module/RecommendLookDraw'
import RecommendLook from './module/RecommendLook'
import { selectLogistics, getCustomerDefLogistic, batchGetProductPromotionPrice } from '@/api/box/api'
import {
  findStylingCart,
  deleteStylingCart,
  changeStylingCartSort,
  selectById,
  getGroupOrder,
  initStylingCart,
  queryStylingTpl,
  findMsg,
  getCustomerAskBoxInfo,
  querySkus,
  insertRemark,
  batchTagsByUnionIdAndskc,
  saveCustomer,
  getVouchersById,
  vouchersList,
  queryStock,
  updateStylingCart,
  deleteStylingDetail
} from '@/api/box/workbench'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { mapActions, mapState } from 'vuex'
import { triggerWindowResizeEvent } from '@/utils/util'
import { mixinDevice } from '@/utils/mixin.js'
import { colMixin } from './mixin.js'
export default {
  mixins: [mixinDevice, colMixin],
  data() {
    return {
      initData: {
        visibleAddList: false,
        unionId: this.$route.params.unionId,
        defLogistic: null
      },
      targetOffset: undefined,
      currentIndex: 0,
      data: [],
      modalText: '',
      modalType: '',
      memberRemark: '', // 会员备注
      meRemark: '', // 我的备注
      height: '', // 身高
      weight: '', // 体重
      visible: false,
      falg: true,
      collapsedLeft: false,
      collapsedRight: false,
      visible: false,
      visible2: false,
      queryParam: {},
      cartList: [],
      informationlist: [
        { title: '基本信息', herf: '#components' },
        { title: '要盒需求', herf: '#components-anchor' },
        { title: '交易偏好', herf: '#components-anchor-demo' },
        { title: '交易记录', herf: '#comp-box' },
        { title: '风格档案', herf: '#anchor-demo' },
        { title: '会员权益', herf: '#components-demo' }
      ], // 会员信息
      userInfo: Vue.ls.get(USER_INFO),
      unionId: this.$route.params.unionId, // oZpUxs1utN7-JLtQAD5AMcW_nIPM
      outNo: this.$route.params.outNo == 'getstyle' ? '' : this.$route.params.outNo,
      customerInfo: {
        details: {},
        customerInfoForAnswer: {},
        bcustomerPreferenceInfo: {
          category: '',
          color: '',
          textureOfMaterial: '',
          style: ''
        }
      },
      defLogistic: {},
      hasLogistic: null,
      visibleImgs: false,
      imgList: [],
      goToIndex: 0,
      orderList: [], // 交易记录
      pageNo: 1,
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      lookData: [],
      singleData: [],
      productList: [], // productId集合
      infoVisible: false, // 商品弹窗
      proInfo: {
        skus: [{ imgurl: '' }]
      }, // 商品信息obj
      infoType: '', // 商品分类来源
      collapsedSider: !this.$store.state.app.sidebar.opened,
      gender: null, // 根据性别，判断商品库默认勾选品牌
      scrollTop: '',
      genderType: {
        0: '女',
        1: '男'
      },
      wantBox: {
        boxRemark: null,
        customerStyleImgs: [],
        dealBoxNum: null,
        expectConnect: null,
        expectProduct: '',
        expectTheme: [],
        leaveMsg: null,
        sendBoxNum: null
      },
      visibleAddList: false,
      totPrice: 0,
      totPromotionPrice: 0,
      couponList: [], // 优惠卷
      discountList: [],
      interceptList: [],
      disclength: 0,
      dealerBrandList: [],
      pageSize: 3,
      storeId: ''
    }
  },
  components: {
    Look,
    Goods,
    Product,
    BigImg,
    GoodInfo,
    draggable,
    DiscountModal,
    Region,
    RecommendLookDraw,
    RecommendLook
  },
  computed: {
    ...mapState({ collapsed: state => !state.app.sidebar.opened }),
    // layout-content padding-left
    paddingLeftNum() {
      if (this.device == 'desktop') {
        if (this.collapsedLeft) {
          // sider 关闭
          return '0px'
        } else {
          return '330px'
        }
      } else if (this.device == 'mobile') {
        if (this.collapsedLeft) {
          // sider 关闭
          return '30px'
        } else {
          return '350px'
        }
      }

      /* if (this.collapsedSider) {
        // 关闭 80
        if (this.collapsedLeft) {
          // sider 关闭
          return '0px'
        } else {
          return '400px'
        }
      } else {
        // 打开208
        if (this.collapsedLeft) {
          // sider 关闭
          return '0'
        } else {
          return '400px'
        }
      } */
    },
    // layout-content padding-right
    paddingRightNum() {
      if (this.device == 'desktop') {
        if (this.collapsedRight) {
          return 0
        } else {
          return '175px'
        }
      } else if (this.device == 'mobile') {
        if (this.collapsedRight) {
          return '20px'
        } else {
          return '195px'
        }
      }
    },
    // leftSider left
    positionLeft() {
      if (this.device == 'desktop') {
        if (this.collapsedSider) {
          // menu 关闭
          if (this.collapsedLeft) {
            // sider 关闭
            return '0'
          } else {
            return '80px'
          }
        } else {
          // menu 打开
          if (this.collapsedLeft) {
            // sider 关闭
            return '0'
          } else {
            return '208px'
          }
        }
      } else if (this.device == 'mobile') {
        return '0'
      }
    },
    // left-handle left
    handlePositionLeft() {
      if (this.device == 'desktop') {
        if (this.collapsedSider) {
          // menu 关闭
          if (this.collapsedLeft) {
            // sider 关闭
            return '80px'
          } else {
            return '410px'
          }
        } else {
          // menu 打开
          if (this.collapsedLeft) {
            // sider 关闭
            return '208px'
          } else {
            // sider 打开
            return '538px'
          }
        }
      } else if (this.device == 'mobile') {
        if (this.collapsedLeft) {
          // sider 关闭
          return '0'
        } else {
          // sider 打开
          return '324px'
        }
      }
    },
    disabledSize() {
      return (record, sizeNo) => {
        let colorNo = record.colorNo
        let result = record.skus.filter(e => e.sizeno == sizeNo && e.colorno == colorNo)
        if (result.length > 0) {
          return !(result[0].stock > 0)
        } else {
          return true
        }
      }
    }
  },
  watch: {
    $route(to) {
      console.log(to.path)
      this.getUnionidOutid()
    },
    collapsed(value, oldvalue) {
      this.collapsedSider = value
    },
    device(value) {
      console.log('device', value)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  created() {
    this.sideBarToggle()
    this.getInfo()
    this.initStylingCart()
    this.getGroupOrder()
  },
  mounted() {
    this.fetchLookList()
    if (this.outNo != '') {
      this.getCustomerDefLogistic()
    } else {
      this.fetchAddressList()
    }
  },
  methods: {
    regionClick() {
      this.initData.visibleAddList = true
    },
    anchorClick(e) {
      e.preventDefault()
    },
    gerGood() {
      return document.getElementById('goods')
    },
    // 查看商品信息
    open(item) {
      this.$refs.goodInfoModal.show(item.productId, item.skuId)
    },
    // 关闭地址modal
    closeAddress(value) {
      this.initData.visibleAddList = value
    },
    // 刷新地址列表
    refreshList(value) {
      if (value) {
        this.fetchAddressList()
      }
    },
    // 查看顾客地址列表
    fetchAddressList() {
      selectLogistics(this.unionId)
        .then(res => {
          if (res.code === 0) {
            let data = res.data
            if (data.length > 0) {
              this.hasLogistic = true
              let result = data.filter(e => e.logDefault == 1)
              if (result.length > 0) {
                this.defLogistic = result[0]
                this.initData.defLogistic = result[0]
              } else {
                this.defLogistic = data[0]
                this.initData.defLogistic = data[0]
              }
            } else {
              this.hasLogistic = false
            }
          } else {
            this.$message.error(res.data)
          }
        })
        .catch(err => {
          console.log('查看顾客地址列表:' + err)
        })
    },
    // 获取默认要盒地址
    getCustomerDefLogistic() {
      getCustomerDefLogistic(this.outNo, this.unionId)
        .then(res => {
          if (res.code === 0) {
            if (res.data != null) {
              this.defLogistic = res.data
              this.initData.defLogistic = res.data
            } else {
              this.fetchAddressList()
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('获取默认要盒地址：' + err)
        })
    },
    newAddress(value) {
      if (value) {
        this.defLogistic = value
        this.initData.defLogistic = value
      } else {
        this.getCustomerDefLogistic()
      }
    },
    dealerBrand(value) {
      this.dealerBrandList = value
      this.getCusInfo()
    },
    showModal(type) {
      switch (type) {
        case 'memberRemark':
          this.modalText = '编辑会员备注'
          this.modalType = 'memberRemark'
          this.memberRemark = this.customerInfo.details.bgRemark
          break
        case 'meRemark':
          this.modalText = '编辑我的备注'
          this.modalType = 'meRemark'
          this.meRemark = this.wantBox.boxRemark
          break
        case 'shape':
          this.modalText = '编辑身高/体重'
          this.modalType = 'shape'
          this.height = this.customerInfo.customerInfoForAnswer.height == '-' ? '' : this.customerInfo.customerInfoForAnswer.height
          this.weight = this.customerInfo.customerInfoForAnswer.weight == '-' ? '' : this.customerInfo.customerInfoForAnswer.weight
          break
      }
      setTimeout(() => {
        this.visible = true
      }, 200)
    },
    async querySkuAndStock(item, type) {
      // console.log(item)
      if (item.skus.length == 0) {
        await this.fetchQuerySkus(item)
      }
      if (type == 'size') {
        let skusForColor = item.skus.filter(e => e.colorno == item.colorNo)
        let skuIds = skusForColor.map(i => i.id)
        let stockList = await this.fetchStock(skuIds)
        for (let sku of item.skus) {
          let result = stockList.filter(k => k.skuId == sku.id)
          if (result.length > 0) {
            sku.stock = result[0].stock > 0 ? result[0].stock : 0
          }
        }
      }
    },
    // 选择颜色尺码
    selectColor(value, record) {
      // console.log(value, record)
      if (record.sizeNo && record.sizeName) {
        let defaultSize = {
          sizeNo: record.sizeNo,
          sizeName: record.sizeName,
          colorNo: record.colorNo,
          colorName: record.colorName
        }
        record.defaultSize = defaultSize
      }

      record.colorNo = value
      record.colorName = record.colorList.filter(e => e.colorno == value)[0].color_name
      record.sizeNo = ''
      record.sizeName = ''

      console.log(record)
      /* const colorsize = value + record.sizeNo
      // this.checkExistGood(record, colorsize)
      this.checkSku(colorsize, record) */
    },
    selectSize(value, record) {
      if (record.sizeNo && record.sizeName) {
        let defaultSize = {
          sizeNo: record.sizeNo,
          sizeName: record.sizeName,
          colorNo: record.colorNo,
          colorName: record.colorName
        }
        record.defaultSize = defaultSize
      }

      if (value == record.defaultSize.sizeNo && record.colorNo == record.defaultSize.colorNo) {
        record.sizeNo = record.defaultSize.sizeNo
        record.sizeName = record.sizeList.filter(e => e.sizeno == value)[0].size_name
        delete record.defaultSize
        return
      }
      const colorsize = record.colorNo + value
      // this.checkExistGood(record, colorsize)
      this.checkSku(colorsize, record, this.cartList)
    },
    async skuPopVisible(v, item) {
      if (v) {
        await this.handleSkuOptions(item)
      }
      item.pop = v
    },
    async skuOnChange(value, record, index) {
      console.log(value, record)
      if (value[1] == record.currentSku.sizeNo && value[0] == record.currentSku.colorNo) {
        return
      }
      await this.checkSku(value, record, this.cartList)
    },
    // 确认look中是否含有要修改的商品
    /* checkExistGood(record, colorsize) {
      const cartSkuId = record.skuId
      var emptyList = []
      for (var i = 0; i < this.lookData.length; i++) {
        const stylings = JSON.parse(JSON.stringify(this.lookData[i].stylings))
        if (stylings.length > 0) {
          // look中含商品
          const result = stylings.filter(item => item.skuId === cartSkuId.toString())
          if (result.length > 0) {
            // 含有购物车要修改的商品
            const index = stylings.indexOf(result[0])
            this.$message.warning('请先删除LOOK/单品中对应的商品，再进行修改！', 2)
            emptyList = emptyList.concat(stylings)
          }
        } else {
          emptyList = emptyList.concat(stylings)
        }
      }
      if (emptyList.length === 0) {
        this.checkSku(colorsize, record)
      }
    }, */
    // 修改购物车商品
    updateStylingCart(goods, record, stock, ifEb) {
      let respList = []
      if (record.respList && record.respList.length > 0) {
        respList = record.respList.map(item => {
          const newItem = {
            colorName: goods.color_name,
            colorNo: goods.colorno,
            imgUrl: goods.imgurl,
            productCode: item.productCode,
            productId: item.productId,
            productName: item.productName,
            sizeName: goods.size_name,
            sizeNo: goods.sizeno,
            skuId: goods.id,
            skuCode: goods.no,
            sorted: item.sorted,
            stylingBaseId: item.stylingBaseId,
            id: item.id
          }
          return newItem
        })
      }
      const data = {
        requestData: {
          colorName: goods.color_name,
          colorNo: goods.colorno,
          id: record.id,
          imgUrl: goods.imgurl,
          sizeName: goods.size_name,
          sizeNo: goods.sizeno,
          skuCode: goods.no,
          skuId: goods.id,
          unionId: this.unionId,
          list: respList
        },
        user_id: this.userInfo.id
      }
      updateStylingCart(data)
        .then(res => {
          if (res.code === 0) {
            record.colorName = goods.color_name
            record.colorNo = goods.colorno
            record.imgUrl = goods.imgurl
            record.sizeName = goods.size_name
            record.sizeNo = goods.sizeno
            record.skuCode = goods.no
            record.skuId = goods.id
            record.stock = stock
            record.ifEb = ifEb
            record.currentSku = {
              stock: goods.stock,
              colorNo: goods.colorno,
              sizeNo: goods.sizeno,
              id: goods.id,
              imgUrl: goods.imgurl,
              ifEb: goods.ifEb
            }
            this.getBatchTags()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('修改购物车商品:' + err)
        })
    },
    handleOk() {
      switch (this.modalType) {
        case 'memberRemark':
          this.editCustomer()
          break
        case 'meRemark':
          this.insertRemark()
          break
        case 'shape':
          this.editCustomer()
          break
      }
    },
    // 修改要盒备注
    insertRemark() {
      insertRemark(this.outNo, this.meRemark)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('修改成功')
            this.getWantBox()
            this.visible = false
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('要盒需求信息：' + err)
        })
    },
    // 修改身高/体重或者备注
    editCustomer() {
      let params = {}
      if (this.modalType == 'memberRemark') {
        params = {
          requestData: {
            bgRemark: this.memberRemark,
            id: this.customerInfo.details.id
          }
        }
      } else {
        params = {
          requestData: {
            height: this.height,
            weight: this.weight,
            id: this.customerInfo.details.id
          }
        }
      }

      saveCustomer(params)
        .then(res => {
          if (res.code === 0) {
            this.getCusInfo()
            this.$message.success('修改成功')
            this.visible = false
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('要盒身高/体重：' + err)
        })
    },
    seeClick() {
      this.$refs.DiscountModal.open()
    },
    ...mapActions(['setSidebar']),
    sideBarToggle() {
      this.setSidebar(false)
      triggerWindowResizeEvent()
    },
    getUnionidOutid() {
      this.unionId = this.$route.params.unionId
      this.outNo = this.$route.params.outNo == 'getstyle' ? '' : this.$route.params.outNo
    },
    userTabsChange(key) {
      // console.log(key)
    },
    goodsTabsChange(key) {
      // console.log(key)
    },
    handleRight() {
      this.collapsedRight = !this.collapsedRight
    },
    handleLeft() {
      this.collapsedLeft = !this.collapsedLeft
    },
    // 前往搭配页面
    toColl() {
      if (this.cartList.length > 0) {
        this.$router.push(`/box/workbench/fashioner/collocation/${this.unionId}/${this.$route.params.outNo}`)
      } else {
        this.$message.warning('请选择商品！')
      }
    },
    // 初始化购物车（for主题搭配）
    initStylingCart() {
      const data = {
        requestData: {
          customerAskId: this.outNo
        },
        user_id: this.userInfo.id
      }
      initStylingCart(data)
        .then(res => {
          if (res.code === 0) {
            this.fetchShoppingCart()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('初始化购物车:' + err)
        })
    },
    // 获取购物车数据
    fetchShoppingCart() {
      const data = {
        requestData: {
          unionId: this.unionId,
          outNo: this.outNo
        },
        user_id: this.userInfo.id
      }
      findStylingCart(data)
        .then(async res => {
          if (res.code === 0) {
            res.data.forEach(item => {
              item.price = item.price ? Number(item.price).toFixed(2) : 0
              item.productPrice = item.productPrice ? Number(item.productPrice).toFixed(2) : 0
            })
            const skus = res.data.map(item => {
              return item.skuId
            })
            if (res.data.length != 0) {
              this.stockList = await this.fetchStock(skus)

              for (var i = 0; i < res.data.length; i++) {
                res.data[i].skus = []
                res.data[i].colorList = []
                res.data[i].colorList.push({
                  color_name: res.data[i].colorName,
                  colorno: res.data[i].colorNo
                })
                res.data[i].sizeList = []
                res.data[i].sizeList.push({
                  size_name: res.data[i].sizeName,
                  sizeno: res.data[i].sizeNo
                })
                const arr = this.stockList.filter(value => {
                  if (value.skuId === res.data[i].skuId) {
                    return value
                  }
                })
                res.data[i].stock = arr[0].stock
                res.data[i].ifEb = arr[0].ifEb
              }

              // 处理联级skuOptions
              for (let item of res.data) {
                item.skus = []
                item.pop = false
                item.disabled = false
                item.skuOptions = [
                  {
                    disabled: false,
                    label: item.colorName,
                    value: item.colorNo,
                    children: [{ disabled: false, imgUrl: item.imgUrl, label: item.sizeName, skuId: item.skuId, stock: item.stock, value: item.sizeNo }]
                  }
                ]
                item.currentSku = {
                  stock: item.stock,
                  colorNo: item.colorNo,
                  sizeNo: item.sizeNo,
                  id: item.skuId,
                  imgUrl: item.imgUrl,
                  ifEb: item.ifEb
                }

                // await this.handleSkuOptions(item)
              }

              this.cartList = res.data
              this.getBatchTags() // 查询标签接口
              const spuList = this.cartList.map(e => {
                return { spuId: e.productId }
              })
              if (spuList.length > 0) {
                this.getProductPromotionPrice(spuList)
              } else {
                this.totPromotionPrice = 0
                this.totPrice = 0
              }
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('购物车:' + err)
        })
    },
    getProductPromotionPrice(list) {
      let data = {
        requestData: {
          productList: list,
          unionId: this.unionId
        },
        user_id: this.userInfo.id
      }
      batchGetProductPromotionPrice(data)
        .then(res => {
          if (res.code == 0) {
            this.cartList = this.cartList.map((item, index) => {
              let promotionPrice = res.data.productList[index].promotionPrice.toFixed(2)
              return { promotionPrice, ...item }
            })
            this.totPrice = res.data.totPrice
            this.totPromotionPrice = res.data.totPromotionPrice
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('ProductPromotionPrice:' + err)
        })
    },
    // 刷新购物车
    updateShoppingCart(value) {
      if (value) {
        this.fetchShoppingCart()
      }
    },
    // 删除购物车商品
    async deleteCart(id, index, item) {
      try {
        await this.queryStylingTpl()
        this.checkStylingGood(id, index, item)
      } catch (err) {
        console.log(err)
      }
    },
    // 查询look列表
    async fetchLookList() {
      try {
        const stylingResult = await this.queryStylingTpl()
        if (stylingResult.code === 0) {
          this.lookData = []
          this.singleData = []
          for (var i = 0; i < stylingResult.data.length; i++) {
            if (stylingResult.data[i].type === 2) {
              this.singleData.push(stylingResult.data[i])
            } else {
              this.lookData.push(stylingResult.data[i])
            }
          }

          if (this.singleData.length > 0) {
            this.lookData.push(this.singleData[0])
          }

          this.loading = false
        } else {
          this.$message.error(stylingResult.msg)
          this.loading = false
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 查询look列表
    queryStylingTpl() {
      if (this.lookData.length <= 0) {
        const data = {
          page: {
            pageNo: 1,
            pageSize: 100
          },
          requestData: {
            outNo: this.outNo,
            unionId: this.unionId
          },
          user_id: this.userInfo.id
        }
        return queryStylingTpl(data)
          .then(res => {
            if (res.code === 0) {
              this.lookData = res.data
            } else {
              this.$message.error(res.msg)
            }
            return res
          })
          .catch(err => {
            console.log('查询look列表:' + err)
          })
      } else {
        console.log(this.lookData)
      }
    },
    getEl() {
      return document.getElementById('goods')
    },
    // 确认look中是否含有要删除的商品
    checkStylingGood(id, index, record) {
      const cartSkuId = record.skuId
      // console.log(cartSkuId, this.lookData)
      // var emptyList = []
      for (var i = 0; i < this.lookData.length; i++) {
        const stylings = JSON.parse(JSON.stringify(this.lookData[i].stylings))
        if (stylings.length > 0) {
          // look中含商品
          const result = stylings.filter(item => item.skuId === cartSkuId.toString())
          if (result.length > 0) {
            // 含有购物车要删除的商品
            const index = stylings.indexOf(result[0])
            // this.$message.warning('请先删除LOOK/单品中对应的商品！', 2)
            // emptyList = emptyList.concat(stylings)
            this.deleteStylingDetail(result[0].id)
          }
        }
      }
      // else {
      //     emptyList = emptyList.concat(stylings)
      //   }
      // }
      // console.log(emptyList)
      // if (emptyList.length === 0) {
      this.deleteShoppingCart(id, index)
      // }
    },
    // 删除搭配明细
    deleteStylingDetail(id) {
      this.getDiscount = false
      const data = {
        requestData: {
          id: id
        },
        user_id: this.userInfo.id
      }
      deleteStylingDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('商品删除成功！')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('删除搭配明细:' + err)
        })
    },
    // 购物车删除
    deleteShoppingCart(id, index) {
      console.log(id)
      const data = {
        requestData: {
          id: id
        },
        user_id: this.userInfo.id
      }
      deleteStylingCart(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('购物车商品删除成功！')
            this.cartList.splice(index, 1)
            const spuList = this.cartList.map(e => {
              return { spuId: e.productId }
            })
            if (spuList.length > 0) {
              this.getProductPromotionPrice(spuList)
            } else {
              this.totPrice = 0
              this.totPromotionPrice = 0
            }
            // this.fetchShoppingCart()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('搭盒商品购物车删除:' + err)
        })
    },
    // 会员信息
    async getInfo() {
      await this.getCusInfo() // 用户信息

      await this.getVouchers() // 生日优惠卷信息
      await this.vouchersList() // 优惠卷信息
      if (this.outNo != '') {
        // 主动要盒
        await this.getWantBox() // 要盒信息

        // 根据性别，判断商品库默认勾选品牌
        let result = await this.checkMsg()
        if (result.code == 0) {
          this.gender = result.data.customerAskBox.cusGender

          return
        } else {
          this.$message.warning(result.msg)
        }
      }
      this.gender = this.customerInfo.details.gender != null ? this.customerInfo.details.gender : -1
    },
    // 获取要盒信息
    getWantBox() {
      let params = {
        id: this.outNo
      }
      return getCustomerAskBoxInfo(params)
        .then(res => {
          if (res.code === 0) {
            let arry = []
            if (res.data.customerStyleImgs) {
              res.data.customerStyleImgs.forEach(item => {
                arry.push({ value: item })
              })
            }
            this.wantBox = res.data || this.wantBox
            this.wantBox.customerStyleImgs = arry
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('要盒需求信息：' + err)
        })
    },
    // 获取生日优惠卷信息
    getVouchers() {
      return getVouchersById(this.unionId)
        .then(res => {
          if (res.code === 0) {
            this.couponList = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('优惠卷信息：' + err)
        })
    },
    // 获取优惠卷信息
    vouchersList() {
      let data = {
        page: {
          pageNo: 1,
          pageSize: 100
        },
        requestData: {
          type: 0,
          unionid: this.unionId
        },
        user_id: this.userInfo.id
      }
      return vouchersList(data)
        .then(res => {
          if (res.code === 0) {
            this.discountList = res.data
            this.disclength = res.data.length
            this.discountList.forEach(ele => {
              ele.startDate = ele.startDate ? ele.startDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$3') : ''
              ele.validDate = ele.validDate ? ele.validDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1.$2.$3') : ''
              ele.vouDis = ele.vouDis ? (ele.vouDis * 10).toFixed(1) : ''
              ele.falg = false // 判断箭头方向以及提示
            })
            if (this.discountList && this.discountList.length > 2) {
              this.interceptList = this.discountList.slice(0, 2)
            } else {
              this.interceptList = this.discountList
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('优惠卷信息：' + err)
        })
    },
    // 获取用户信息
    getCusInfo() {
      return selectById(this.unionId, '')
        .then(res => {
          if (res.code === 0) {
            this.getLine(res.data.customerInfoForAnswer)
            let arry = []
            if (res.data.lifePhotos) {
              res.data.lifePhotos.forEach(item => {
                arry.push({ value: item })
              })
            }
            this.customerInfo = JSON.parse(JSON.stringify(res.data))
            this.customerInfo.age = this.customerInfo.age && this.customerInfo.age > 0 ? this.customerInfo.age : '--'
            this.customerInfo.details.birthday = this.customerInfo.details.birthday ? this.customerInfo.details.birthday : '--'
            this.customerInfo.lifePhotos = arry
            this.customerInfo.integer = this.customerInfo.integer || '-'
            this.customerInfo.details.coin = this.customerInfo.details.coin || '-'
            this.customerInfo.topClass = this.customerInfo.topClass ? this.customerInfo.topClass.toString() : ''
            this.customerInfo.fabric = this.customerInfo.fabric && this.customerInfo.fabric.length > 0 ? this.customerInfo.fabric.toString() : '-'
            if (this.dealerBrandList) {
              this.customerInfo.dealerBrand = Array.from(new Set(this.dealerBrandList.concat(this.customerInfo.dealerBrand)))
            }
            if (res.data.bcustomerPreferenceInfo != null) {
              this.customerInfo.bcustomerPreferenceInfo.category = res.data.bcustomerPreferenceInfo.category ? JSON.parse(res.data.bcustomerPreferenceInfo.category).join(',') : '-'
              this.customerInfo.bcustomerPreferenceInfo.color = res.data.bcustomerPreferenceInfo.color ? JSON.parse(res.data.bcustomerPreferenceInfo.color).join(',') : '-'
              this.customerInfo.bcustomerPreferenceInfo.textureOfMaterial = res.data.bcustomerPreferenceInfo.textureOfMaterial
                ? JSON.parse(res.data.bcustomerPreferenceInfo.textureOfMaterial).join(',')
                : '-'
              this.customerInfo.bcustomerPreferenceInfo.style = res.data.bcustomerPreferenceInfo.style ? JSON.parse(res.data.bcustomerPreferenceInfo.style).join(',') : '-'
            } else {
              this.customerInfo.bcustomerPreferenceInfo = {
                category: '-',
                color: '-',
                textureOfMaterial: '-',
                style: '-'
              }
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('用户信息：' + err)
        })
    },
    getLine(obj) {
      for (let i in obj) {
        if (obj[i] === null) obj[i] = '-'
      }
    },
    // 查看大图
    bigImg(index, list, type) {
      if (type === 'styleList') {
        this.imgList = list.map(item => {
          if (item.img) {
            item.value = item.img
          }
          return item.value
        })
      } else if (type === 'photo') {
        this.imgList = [list]
      }
      this.goToIndex = index
      setTimeout(() => {
        this.visibleImgs = true
      }, 100)
    },
    // 关闭大图
    closeBig(value) {
      this.visibleImgs = value
      setTimeout(() => {
        this.imgList = []
      }, 200)
    },
    // 集团消费记录
    getGroupOrder() {
      const data = {
        page: {
          pageNo: this.pageNo,
          pageSize: 10
        },
        requestData: {
          unionId: this.unionId
        }
      }
      getGroupOrder(data)
        .then(res => {
          if (res.code === 0) {
            this.orderList = this.orderList.concat(res.data)
            this.loadingMore = false
            // this.pageSize = 10
            if (res.page.pageNo === res.page.pages) {
              this.showLoadingMore = false
            }
          } else {
            this.$message.error(res.msg)
          }
          this.loading = false
          if (this.orderList.length === 0) {
            this.showLoadingMore = false
          }
        })
        .catch(err => {
          console.log('集团消费记录:' + err)
        })
    },
    onLoadMore() {
      this.loadingMore = true
      this.pageNo += 1
      this.getGroupOrder()
    },
    // 查看商品信息
    openInfo(visible, obj, type) {
      console.log(1)
      this.proInfo = obj
      this.infoVisible = visible
      this.infoType = type
    },
    // 关闭商品信息
    closeInfo(value) {
      this.infoVisible = value
      this.proInfo = {
        skus: [{ imgurl: '' }]
      }
      this.infoType = ''
    },
    // 要盒留言
    checkMsg() {
      return findMsg(this.outNo).then(res => {
        return res
      })
    },
    // 拖拽确定
    determine() {
      let spuList = this.cartList.map(e => {
        return e.id
      })
      const data = {
        requestData: {
          ids: spuList
        }
      }
      changeStylingCartSort(data)
        .then(res => {
          if (res.code === 0) {
            this.fetchShoppingCart()
            this.falg = true
            this.$message.success('修改购物车排序成功')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('修改购物车排序:' + err)
        })
    },
    // 拖拽取消
    cancelOrder() {
      this.fetchShoppingCart()
      this.falg = !this.falg
    },
    // 批量查询用户的商品标签
    getBatchTags() {
      let tagList = []
      for (let item of this.cartList) {
        tagList.push(`${item.productCode},${item.colorNo}`)
      }
      let data = {
        requestData: {
          productCodesAndColors: tagList,
          unionId: this.unionId
        }
      }
      return batchTagsByUnionIdAndskc(data).then(res => {
        this.cartList = this.cartList.map((item, index) => {
          let status = res.data[index].status
          let inLook = res.data[index].inLook
          return { ...item, status, inLook }
        })
      })
    },
    // 获取storeId
    getStoreId(value) {
      this.storeId = value
    },
    // 查看推荐LOOK
    showRecommend(item) {
      this.$refs.recommendLookDraw.show(item)
    }
  }
}
</script>
<style lang="less" scoped src="./style/style.less"></style>
<style lang="less" scoped>
.tagType {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  &.blue {
    background: #1890ff;
  }
}
.ant-back-top {
  bottom: 100px;
  /deep/.ant-back-top-content {
    background: rgba(0, 0, 0, 0.7);
  }
}
.sider {
  background: white;
  height: 100vh;
  z-index: 5;
  box-shadow: none;
  .brands {
    margin-bottom: 6px;
  }
  .order-list {
    overflow-y: auto;
    .ant-list-item {
      align-items: flex-start;
    }
    .img-box {
      text-align: center;
      width: 76px;
      position: relative;
    }
    .order-img {
      width: 64px;
      height: 64px;
      object-fit: scale-down;
      border: 1px dashed #cdcdcd;
      margin-right: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      box-sizing: border-box;
      padding: 4px;
    }
    /deep/ .ant-descriptions-row > th,
    /deep/ .ant-descriptions-row > td {
      padding-bottom: 6px;
    }
  }
}
.like-theme {
  position: relative;
  display: inline-block;
  width: 54px !important;
  margin-right: 8px;
  p {
    text-align: center;
    position: absolute;
    bottom: -2px;
    width: 54px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 12px;
  }
  .imgs {
    padding: 4px;
  }
}
.imgs {
  width: 54px !important;
  height: 54px !important;
  object-fit: scale-down;
  padding: 10px;
  border: 1px solid #cdcdcd;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  margin-top: 8px;
}
.sider-left {
  position: fixed;
}
.sider-right {
  right: 0;
  position: fixed;
  overflow: hidden;
  // padding-bottom: 80px;
  // background: pink;
}
.tab-content {
  padding: 16px 24px;
  max-height: 100%;
  overflow-y: auto;
  background: #fff;
}
.handle-left,
.handle-right {
  position: absolute;
  background: #1890ff;
  width: 24px;
  height: 85px;
  border-radius: 4px 0px 0px 4px;
  text-align: center;
  display: flex;
  cursor: pointer;
  flex-direction: column;
  i {
    font-size: 16px;
    color: #fff;
    margin-top: 3px;
  }
  div {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
  }
}
.handle-right {
  transition: right 0.2s;
  border-radius: 4px 0 0 4px;
  height: 80px;
  padding: 4px 0px;
  div {
    line-height: 16px;
  }
}
.handle-left {
  transition: left 0.2s;
  border-radius: 0 4px 4px 0;
  position: fixed;
  width: 24px;
  height: 32px;
  i {
    line-height: 30px;
  }
}
.ant-pro-basicLayout .trigger {
  padding: 0;
  line-height: initial;
}
.ant-pro-basicLayout .trigger:hover {
  color: #fff;
}
.selection {
  margin: 0;
  padding: 0;
  min-height: 80vh;
  background: #f0f2f5;
  transition: all 0.2s;
  .content {
    background: white;
    padding: 24px;
    margin: 0 30px;
    height: 100%;
  }
}
.customer-info {
  height: 99%;
  /deep/ .ant-tabs-content {
    height: 100%;
    .tab-content {
      overflow-y: auto;
      height: calc(100% - 200px);
      box-sizing: border-box;
      padding-bottom: 150px;
      .ant-list-items {
        padding-bottom: 200px;
      }
    }
  }
}
.style-list {
  display: inline-block;
  position: relative;
  p {
    text-align: center;
    position: absolute;
    bottom: -4px;
    width: 100px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
}
.imgs {
  width: 100px;
  height: 100px;
  object-fit: scale-down;
  padding: 10px;
  border: 1px dashed #cdcdcd;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.shopping-box {
  height: calc(100% - 257px);
  /deep/ .ant-card-head {
    z-index: 2;
    position: relative;
  }
  /deep/ .ant-card-body {
    height: calc(100%);
    overflow-y: auto;
    padding: 12px 14px 24px;
  }
  .shoppingcart {
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 17px;
    .ant-list-item {
      padding: 24px 0;
    }
  }
  .cartGood {
    position: relative;
    width: 100%;
    .close {
      position: absolute;
      right: 62px;
      top: -6px;
      font-size: 16px;
    }
    .img-cover {
      object-fit: scale-down;
      height: 100px;
      width: 100px;
      border: 1px dashed #d9d9d9;
      cursor: pointer;
      padding: 8px;
      // margin: 0 auto;
    }
    /deep/ .ant-card-body {
      padding: 12px 4px 0;
      .content {
        h3 {
          color: #1890ff;
          font-weight: normal;
        }
        p {
          margin-bottom: 16px;
        }
        p:nth-child(2) {
          color: #8c8c8c;
        }
        .price {
          margin-bottom: 6px;
          margin-top: 6px;
          span {
            font-size: 14px;
            color: #ff614e;
          }
          span:last-child {
            color: #8c8c8c;
            text-decoration: line-through;
            margin-left: 6px;
            font-size: 12px;
          }
        }
      }
    }
  }
}
/deep/ .food-list .ant-descriptions-row > td {
  flex-direction: column;
}
.edit-title {
  padding: 12px 14px 8px 14px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
  .shop-box {
    display: flex;
    justify-content: space-between;
    .close {
      font-size: 16px;
      cursor: pointer;
    }
  }
  .edit-shop {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
    margin-bottom: 5px;
  }
  .edit-order {
    font-size: 12px;
    font-weight: 400;
    color: #1890ff;
    cursor: pointer;
    line-height: 22px;
    a {
      margin-right: 8px;
    }
  }
}

.footer {
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5;
  left: 30px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .total {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #8c8c8c;
    margin-bottom: 0;
    .red {
      color: #ff614e;
    }
    .origin {
      font-size: 12px;
      text-decoration: line-through;
      font-weight: 400;
    }
  }
}
.shoppingcart:hover {
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}
.handle-item {
  width: 24px;
  height: 85px;
  background: #d9d9d9;
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  font-weight: 400;
  color: #8c8c8c !important;
  margin-bottom: 4px;
  padding: 8px 0px;
  line-height: 16px;
}
.footer-box {
  padding: 14px;
  font-size: 14px;
  font-weight: 500;
  color: #8c8c8c;
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  .price-box {
    margin-top: 8px;
    margin-bottom: 8px;
    span:last-child {
      text-decoration: line-through;
      font-size: 12px;
    }
  }
  .edit-color {
    color: #ff614e;
  }
}
.goods {
  // display: flex;
  // position: absolute;
  // top: 15px;
  // bottom: 46px;
  padding-top: 18px;
  padding-left: 12px;
  width: 100%;
  overflow: auto;
  height: calc(100% - 40px);
  padding-right: 12px;
  padding-bottom: 48px;
}
/deep/.goods {
  .ant-descriptions-row > th,
  .ant-descriptions-row > td {
    padding-bottom: 12px;
  }
  .ant-descriptions-item-content {
    color: rgba(0, 0, 0, 0.78);
  }
}
.font-color {
  color: #ff9a49;
}
.current {
  background: #1890ff;
  color: #fff !important;
}

.section-title {
  display: flex;
  align-items: center;
}
/deep/ .ant-descriptions-item-label {
  min-width: 96px !important;
  color: #8c8c8c;
}
/deep/ .ant-descriptions-row > td {
  display: flex !important;
}
/deep/ .transaction {
  width: 260px;
}
/deep/ .transaction .ant-descriptions-item-label {
  min-width: 40px !important;
}
/deep/ .transaction .ant-descriptions-row > td {
  display: revert !important;
}

/deep/ .undefined-item-content {
  display: flex !important;
  align-items: center;
}
.nickname {
  max-width: 100px !important;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-size {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-right: 8px;
}
.discount {
  width: 71px;
  height: 18px;
}
.edit-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.icon-title {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}
.ant-carousel {
  margin-top: 6px;
  width: 249px;
  .carousel-imgs {
    height: 100px;
    overflow: hidden;
    height: 54px;
    img {
      width: 54px;
      height: 54px;
      margin: 0 auto;
    }
  }

  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
    object-fit: scale-down;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  /deep/ .slick-prev {
    left: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  /deep/ .slick-next {
    right: -30px !important;
    top: 50% !important;
    .anticon {
      font-size: 16px;
    }
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 50px;
    li {
      margin: 0 5px;
    }
  }
}
/deep/ .ant-descriptions-item-colon::after {
  content: '' !important;
}
.volume {
  margin-left: 74px;
}
.remark {
  min-height: 120px !important;
  margin-top: 8px;
}
.shape {
  width: 150px;
  margin-top: 8px;
  margin-right: 12px;
}
.edit-row {
  padding: 20px 0px;
}
.commodity—title {
  width: 215px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/ .ant-list-something-after-last-item .ant-spin-container > .ant-list-items > .ant-list-item:last-child {
  border-bottom: none !important;
}
/deep/ .edit-tag {
  margin-bottom: 8px !important;
}
/deep/ .edit-address {
  display: inline-block !important;
  padding-top: 0;
}
.carousel-imgs {
  height: 100px;
  overflow: hidden;
  height: 54px;
  img {
    width: 54px;
    height: 54px;
    margin: 0 auto;
  }
}
.tag {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 22px;
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 2;
  padding: 0 8px;
  border-radius: 0 0 4px 4px;
  &.red {
    background: #ff7d76;
  }
  &.yellow {
    background: #efb041;
  }
  &.green {
    background: #87d068;
  }
}
.recommend-look {
  left: 28px;
  top: 68px;
  margin: 0;
  width: 72px;
}
.overdue-img {
  width: 40px;
  height: 32px;
  position: absolute;
  top: 10px;
  right: 0;
}
/deep/ .ant-anchor-wrapper {
  overflow: revert !important;
  background: transparent !important;
}
/deep/ .ant-anchor {
  padding-left: 0;
}
/deep/ .ant-anchor-ink {
  width: 0;
}
/deep/ .ant-anchor-link-title {
  border-radius: 0px 4px 4px 0px;
  font-size: 14px;
  padding: 8px 0px;
  line-height: 16px;
  width: 24px;
  height: 85px;
  white-space: break-spaces !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8c8c8c;
  top: -8px;
}
/deep/ .ant-anchor-link-active > .ant-anchor-link-title {
  color: #fff !important;
  background: #1890ff;
  border-radius: 0px 4px 4px 0px;
}
.leaveMsg {
  width: 200px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
/deep/ .ant-tag {
  margin-bottom: 5px;
}
</style>

